<template>
    <!-- 图上量算 -->
    <div class="measure" id="measure">
        <div class="measureTitle" @mousedown="mousedown" @mouseup="mouseup" @mouseout="mouseup">
            <div class="measureTitleName">
                <!-- <img class="btnsImages" src="@/assets/image/btns/layer.png" alt="" /> -->
                <i class="fa" :class="measureType == 'measure' ? 'fa-calculator' : measureType == 'analysis' ? 'fa-bar-chart' : ''"></i>
                {{ measureType == 'measure' ? '图上量算' : measureType == 'analysis' ? '空间分析' : '' }}
            </div>
            <i class="el-icon-close closeIcon" title="关闭" @click="setMeasure"></i>
        </div>
        <div class="contentBox">
            <!-- <div class="selectmeasure">
                <div class="selectInput" @click="toggleSelectInput">
                    <span>{{ selectVaue }}</span>
                    <i class="el-icon-caret-bottom icons"></i>
                </div>
                <div class="selectInputItem" v-show="selectIsShow">
                    <div class="selectInputItemList" v-for="item in selectData" :key="item.name" @click="selectItem(item)">{{ item.name }}</div>
                </div>
            </div> -->
            <modelBaseElement @clickModelBase="clickModelBase"></modelBaseElement>
        </div>
    </div>
</template>
<script>
// import initTreeData from './utils/coverage.config'
import { mousedown, mouseup } from '../../utils/move.el'
// import { modelBase } from '../utils/modelBase'
import modelBaseElement from './components/modelBase.vue'
import { initMap, Mars3d } from '../../../utils/initMap'
// import trees from './utils/treeHandle'
export default {
    name: 'measure',
    components: {
        modelBaseElement
    },
    data() {
        return {
            // treeData: []
            selectIsShow: false,
            selectData: [],
            selectVaue: '',
            modelBaseElType: ''
        }
    },
    computed: {
        measureIsShow() {
            return this.$store.state.measure
        },
        measureType() {
            return this.$store.state.measure.type
        }
    },
    watch: {
        measureIsShow(newData) {
            const el = document.getElementById('measure')
            el.style.left = 'calc(100% - 270px)'
            el.style.top = '48px'
        }
    },
    mounted() {
        // modelBase().then(res => {
        //     this.selectData = res
        //     this.selectVaue = res[0].name
        //     this.modelBaseElType = res[0].type
        // })
    },
    methods: {
        clickModelBase(item) {
            // 图上量算
            if (item.name == '空间距离') {
                initMap.measure.distance({
                    showAddText: true
                })
            } else if (item.name == '贴地距离') {
                initMap.measure.distance({
                    showAddText: true,
                    style: {
                        clampToGround: true //是否贴地
                    }
                })
            } else if (item.name == '剖面') {
                // this.$alert('功能暂未开发')
                const measureObj = initMap.measure.section({
                    splitNum: 300 // 插值次数
                })
                initMap.measure.clear()
                measureObj.on(mars3d.EventType.start, function(e) {
                    // console.log('开始分析', e)
                    // 开始分析前回调(异步)
                    // showLoading()
                })
                console.log(measureObj)
            } else if (item.name == '水平面积') {
                initMap.measure.area()
            } else if (item.name == '贴地面积') {
                initMap.measure.areaSurface({
                    style: {
                        color: '#ffff00'
                    },
                    splitNum: 10 // step插值分割的个数
                })
            } else if (item.name == '方位角') {
                initMap.measure.angle()
            } else if (item.name == '高度差') {
                initMap.measure.height()
            } else if (item.name == '三角测量') {
                initMap.measure.heightTriangle()
            } else if (item.name == '坐标测量') {
                initMap.measure.point()
            } else {
                this.$alert('功能暂未开发')
            }
            // 空间分析
            // else if (item.name == '日照分析') {
            //     console.log(item)
            // }
        },
        // toggleSelectInput() {
        //     this.selectIsShow = !this.selectIsShow
        // },
        // toggleSelectInputNotShow() {
        //     this.selectIsShow = false
        // },
        // selectItem(item) {
        //     this.selectVaue = item.name
        //     this.modelBaseElType = item.type
        //     this.toggleSelectInput()
        // },
        setMeasure() {
            this.$store.commit('setMeasure', 'off')
        },
        // 移动对话框
        mousedown(e) {
            mousedown(e, 'measure', 'left')
        },
        mouseup() {
            mouseup()
        }
    }
}
</script>
<style lang="scss" scoped>
.measure {
    position: fixed;
    width: 260px;
    height: 488px;
    min-height: 130px;
    top: 48px;
    left: calc(100% - 270px);
    z-index: 1000;
    background: rgba(30, 36, 50, 0.6);
    border-color: rgba(32, 160, 255, 0.3);
    border: 1px solid;
    border-radius: 2px;
    .measureTitle {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid rgba(32, 160, 255, 0.3);
        display: flex;
        justify-content: space-between;
        padding: 0 15px 0 10px;
        align-items: center;
        cursor: move;
        .measureTitleName {
            color: #ffffff;
            font-size: 12px;
            .btnsImages {
                width: 13px;
                height: 13px;
                vertical-align: middle;
            }
        }
        .closeIcon {
            cursor: pointer;
            color: #ffffff;
            font-size: 13px;
        }
    }
    .toolBox {
        width: 100%;
        height: 36px;
        border-bottom: 1px solid rgba(32, 160, 255, 0.3);
        color: #ffffff;
        display: flex;
        justify-content: flex-start;
        padding: 3px 10px;
        .toolBtn {
            margin-right: 10px;
            &:last-child {
                margin-right: 0;
            }
            i {
                width: 28px;
                height: 28px;
                line-height: 25px;
                text-align: center;
                background-color: rgba(63, 72, 84, 0.6);
                border: #dedede 1px solid;
                cursor: pointer;
            }
        }
    }
    .contentBox {
        padding: 2px;
        width: 100%;
        height: calc(100% - 40px);
        overflow: hidden;
        .el-scrollbar {
            width: 100%;
            height: calc(100% - 28px);
        }
        .selectmeasure {
            width: 228px;
            left: 0;
            right: 0;
            margin: 10px auto;
            font-size: 12px;
            // height: 28px;
            position: relative;
            .selectInput {
                width: 228px;
                color: #e6e6e6;
                padding: 0 5px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border: 1px solid #e6e6e6;
                height: 28px;
                border-radius: 2px;
                background: rgba(63, 72, 84, 0.6);
                cursor: pointer;
            }
            .selectInputItem {
                width: 228px;
                left: 0;
                right: 0;
                margin: 10px auto;
                background: rgba(63, 72, 84, 0.8);
                border-radius: 2px;
                border: 1px solid #e6e6e6;
                position: absolute;
                z-index: 999;
                margin-top: 2px;
                color: #e6e6e6;
                padding: 5px;
                .selectInputItemList {
                    height: 28px;
                    line-height: 28px;
                    padding: 0 5px;
                    cursor: default;
                    &:hover {
                        background: #3f4854;
                    }
                }
            }
        }
    }
}
</style>
